<template>
	<view class="">
		<u-popup ref="popup" mode="right">
			<view class="popup-content">
				<view class="screening-condition">
					<view class="screening-title">技师性别</view>
					<view class="sex-content">
						<view class="else-sex">
							<view @click="changeSex(0)"
								:class="screening.sex == 0?'sex-box sex-box-select':'sex-box' ">
								<view>不限</view>
							</view>
							<view @click="changeSex(2)"
								:class="screening.sex == 2?'sex-box sex-box-select':'sex-box' ">
								<view>女技师</view>
							</view>
							<view @click="changeSex(1)"
								:class="screening.sex == 1?'sex-box sex-box-select':'sex-box' ">
								<view>男技师</view>
							</view>
						</view>
					</view>
				</view>
				<view class="screening-condition">
					<view class="screening-title">技师年龄</view>
					<view class="age-content">
						<view class="age-fillin">
							<input type="number" v-model="minAge" placeholder="最低年龄" />
							<view class="lines"></view>
							<input type="number" v-model="maxAge" placeholder="最高年龄" />
						</view>
						<view class="age-list">
							<view @click="agechang(item)" :class="ageid === item.id?'selected-age':''"
								v-for="(item,index) in ageList" :key="index">{{item.age}}</view>
						</view>
					</view>
				</view>
				<view class="screening-condition" style="border: 0;">
					<view class="screening-title">技师姓名</view>
					<input type="text" v-model="screening.elsename" class="technician-name" placeholder="请输入技师名称" />
				</view>
				<view class="choose-btns">
					<view class="chongzhi" @click="reset">重置</view>
					<view class="confirm" @click="affirm">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "shaixuanPopup",
		props:{
			show:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				screening: { //筛选条件
					slidernum: 0, //距离
					sex: 0, //all 1女 2男
					age: "",
					elsename: "",
					sort: 0
				},
				ageList: [{
						id: 0,
						age: "18-30",
						age1:18,
						age2:30,
						
					},
					{
						id: 1,
						age: "31-40",
						age1:31,
						age2:40,
					},
					{
						id: 2,
						age: "41-60",
						age1:41,
						age2:60,
					},
				],
				ageid: '',
				minAge: "",
				maxAge: ""
			}
		},
		mounted() {
			this.screening.slidernum = 0
			this.screening.sex = 0
			this.screening.age = ''
			this.screening.elsename = ''
			this.$emit("massageResult", this.screening)
		},
		methods: {
			sliderChange(data) {
				this.screening.slidernum = data.detail.value
			},
			open() {
				this.$refs.popup.open('right')
			},
			changeSex(type){
				this.$set(this.screening,'sex',this.screening.sex == type?0: type)
				
			},
			agechang(item) {
				this.ageid = item.id
				this.screening.age1 = item.age1
				this.screening.age2 = item.age2
			},
			sliderchang(data) {
				this.screening.slidernum = data
			},
			reset() {
				this.screening.slidernum = 0
				this.screening.sex = 0
				this.screening.age = ''
				this.screening.age1 = ''
				this.screening.age2 = ''
				this.screening.elsename = ''
				this.ageid = ''
				this.$emit("massageResult", this.screening)
				this.$refs.popup.close()
			},
			affirm() {
				if (this.minAge && this.maxAge) {
					this.screening.age = this.minAge + "-" + this.maxAge
					this.screening.age1 = this.minAge
					this.screening.age1 = this.maxAge
				}
				this.$emit("massageResult", this.screening)
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	//筛选弹窗
	.popup-content {
		width: 80vw;
		padding-top: 80rpx;
		position: relative;
		z-index: 100000;
	
		.screening-condition {
			padding: 33rpx;
			border-bottom: 30rpx solid #D8D8D8;
	
			.screening-title {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
			}
	
			.slider-content {
				margin-top: 55rpx;
				padding-bottom: 30rpx;
				text-align: center;
				color: #EF5233;
			}
	
			.sex-content {
				margin-top: 30rpx;
	
				.all-ok {
					width: 138rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 1rpx solid #D7D7D7;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					text-align: center;
					line-height: 60rpx;
				}
	
				.all-ok-select {
					background: rgba(239, 82, 51, 0.1);
					border-radius: 30rpx;
					border: 1rpx solid #EF5233;
					color: #EF5233;
				}
	
				.else-sex {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 50rpx;
					.sex-box {
						height: 60rpx;
						border-radius: 30rpx;
						border: 1rpx solid #D7D7D7;
						display: flex;
						align-items: center;
						text-align: center;
						padding: 0 40rpx;
						view {
							width: 100%;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #000000;
							text-align: center;
							// padding-right: 30rpx;
						}
	
					}
	
					.sex-box-select {
						background: rgba(239, 82, 51, 0.1);
						border-radius: 30rpx;
						border: 1rpx solid #EF5233;
	
						view {
							color: #EF5233;
						}
					}
				}
			}
	
			//
			.age-fillin {
				display: flex;
				align-items: center;
				margin-top: 30rpx;
	
				.lines {
					width: 18rpx;
					height: 1rpx;
					background-color: #979797;
					margin: 0 8rpx;
				}
	
				input {
					width: 210rpx;
					height: 60rpx;
					background: #F3F3F3;
					border-radius: 30rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					text-align: center;
				}
			}
	
			.age-list {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 30rpx;
	
				view {
					width: 138rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 1rpx solid #D7D7D7;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 60rpx;
					text-align: center;
				}
	
				.selected-age {
					background: rgba(239, 82, 51, 0.1);
					border-radius: 30rpx;
					border: 1rpx solid #EF5233;
					color: #EF5233;
				}
			}
	
			.technician-name {
				width: 452rpx;
				height: 60rpx;
				background: #F3F3F3;
				border-radius: 30rpx;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				text-align: center;
				margin-top: 30rpx;
			}
		}
		.choose-btns {
			background: url('../../static/jishi/btn-bg.png')no-repeat;
			background-size: 100% 100%;
			width: 80%;
			height: 76rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view {
				width: 50%;
				text-align: center;
			}
	
			.chongzhi {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
	
			.confirm {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	
</style>